<template>
    <j-modal
      :title="title"
      :width="width"
      :visible="visible"
      :confirmLoading="confirmLoading"
      switchFullscreen
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-form-item label="选择轮播图" :labelCol="labelCol" :wrapperCol="wrapperCol">
            
          </a-form-item>
        </a-form>
        <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
  
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button  type="primary" @click="handleAdd" icon="plus">新增</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" >
              <a-icon type="delete"/>
              删除
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
      </div>
  
      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
          selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" >清空</a>
        </div>
  
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap">
  
          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt=""
                 style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button
              v-else
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
             >
              下载
            </a-button>
          </template>
  
          <span slot="action" slot-scope="text, record">
            <a >编辑</a>
  
            <a-divider type="vertical"/>
            <a-dropdown>
              <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>
  
          <template slot="imageUrl" slot-scope="text">
            <img src="text"/>
          </template>
        </a-table>
      </div>
  
      <areaBannerInfoModal ref="modalForm" @ok="modalFormOk"></areaBannerInfoModal>
    </a-card>
      </a-spin>
    </j-modal>
    
  </template>
  
  <script>
    import {JeecgListMixin} from '@/mixins/JeecgListMixin'
    import areaBannerInfoModal from './areaBannerInfoModal'
    import {httpAction, getAction} from '@/api/manage'
    import pick from 'lodash.pick'
    import JDate from '@/components/jeecg/JDate'
  
  
    export default {
      name: "SmsRegionInfoModal",
      mixins: [JeecgListMixin],
      components: {
        JDate,
        areaBannerInfoModal
      },
      data() {
        return {
          columns: [
          {
            title: '菜单名称',
            dataIndex: 'name'
          },
          {
            title: '组件',
            dataIndex: 'component'
          },
          {
            title: '排序',
            dataIndex: 'orderNum'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
          dataSource:[],
          loading:false,
          selectedRowKeys:[],
          form: this.$form.createForm(this),
          title: "操作",
          width: 1100,
          visible: false,
          checked:true,
          model: {},
          labelCol: {
            xs: {span: 24},
            sm: {span: 5},
          },
          wrapperCol: {
            xs: {span: 24},
            sm: {span: 16},
          },
          confirmLoading: false,
          validatorRules: {},
          url: {
            list:'/sms/smsHomeCarouselRelation/list',
            add: "/sms/smsHomeCarouselRelation/add",
            edit: "/sms/smsHomeCarouselRelation/edit",
          },
          regionInfoList: [],
        }
      },
      created() {
      },
      methods: {
        modalFormOk(){},
        onSelectChange(){},
        show(row) {
         this.visible = true;
         console.log("row", row)
        },
        edit(record) {
          this.form.resetFields();
          this.model = Object.assign({}, record);
          this.visible = true;
          if (record.regionGrade > 1){
            let grand = record.regionGrade -1;
            this.getListByPidAndGrade(grand);
          }
          if (record){
            this.checked = record.popularCities  == 0 ? false : true;
          }else {
            //设置默认展示
            this.model.showStatus = 1;
          }
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model, 'regionName', 'regionGrade', 'regionPid', 'regionCode', 'createBy', 'createTime', 'updateBy', 'updateTime', 'delFlag', 'popularCities'))
          })
        },
        close() {
          this.$emit('close');
          this.visible = false;
        },
        handleOk() {
          const that = this;
          // 触发表单验证
          this.form.validateFields((err, values) => {
            if (!err) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              if (!this.model.id) {
                httpurl += this.url.add;
                method = 'post';
              } else {
                httpurl += this.url.edit;
                method = 'put';
              }
              let formData = Object.assign(this.model, values);
              console.log("表单提交数据", formData)
              httpAction(httpurl, formData, method).then((res) => {
                if (res.success) {
                  that.$message.success(res.message);
                  that.$emit('ok');
                } else {
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
                that.close();
              })
            }
  
          })
        },
        handleCancel() {
          this.close()
        },
        popupCallback(row) {
          this.form.setFieldsValue(pick(row, 'regionName', 'regionGrade', 'regionPid', 'regionCode', 'createBy', 'createTime', 'updateBy', 'updateTime', 'delFlag', 'popularCities'))
        },
        getListByRegionGrade() {
          if (this.model.regionGrade > 1) {
            let grade = this.model.regionGrade - 1;
            this.getListByPidAndGrade(grade);
          }
        },
        getListByPidAndGrade(grade){
          getAction(this.url.getListByPidAndGrade, {grade: grade}).then((res) => {
            if (res.success) {
              this.regionInfoList = res.result;
            }
          });
        },
        switchOn(checked){
          if (checked){
            this.model.popularCities = 1;
            this.checked = true;
          } else {
            this.model.popularCities = 0;
            this.checked = false;
          }
        },
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less';
  </style>